<template>
  <div id="page" >
    <img class="page-bg" src="../../assets/app-bg.jpg" >
    <van-nav-bar class="navTop" :title="$t('aut.一键跟单')"></van-nav-bar>
    <div class="main">
      <div class="box tit">
          {{$t('page.underway')}}
          <div class="t-r">{{$t('page.Residual_documentary')}} {{gd_num_left}} </div>
      </div>

      <div class="box" style="padding-bottom:0.8rem ">
        <div class="bor" v-if="order.order_time > 0">
          <div class="hua">{{order.income}}USDT/BTC {{$t('page.Success')}}：{{order.succ_rate}}%</div>
          <div class="guo">
            <label>{{order.exchange_a}}</label>
            <div class="line"></div>
            <label>{{order.exchange_b}}</label>
          </div>
          <div class="type">{{ $t('aut.保守型') }}</div>
          <div class="time">
            {{order.order_time}}S
             <div class="text">{{ $t('aut.距离结束') }}</div>
          </div>
          <div class="bottom">
            <div class="btn btn-c-lan" v-if="order.order_number" @click="onStart(order.order_number)" >{{ $t('aut.跟单') }}</div>
          </div>

        </div>
      </div>

      <div class="box tab" :class="tab_i == 2 ? 'tab2' : '' " >
        <div class="li" @click="meunTab('1')">{{$t('page.Has_ended')}} </div>
        <div class="li" @click="meunTab('2')">{{$t('page.My_participation')}}</div>
        <div class="line"></div>
      </div>

      <div v-if="tab_i == 1" class="tab-main">
        <div class="bor" v-for="item in endOrder">
          <div class="guo">
            <div class="Tic">{{item.exchange_a}}<label class="price">{{item.price_a}}</label></div>
            <div class="line"></div>
            <div class="Tic">{{item.exchange_b}}<label class="price">{{item.price_b}}</label></div>
          </div>
          <div class="kuai">
            <div class="bok">{{item.join_num}}<p>{{$t('page.Number_of_people')}} </p></div>
            <div class="bok">
              {{item.income>0 ? '+':''}}
              {{item.income}} USDT/BTC<p>{{$t('page.profit')}}</p></div>
          </div>
        </div>
      </div>
      <div v-else class="tab-main">
        <div class="record" @click="record">{{$t('page.gd_order')}}>></div>

        <img class="nodata" v-if="joinOrder.length == 0" src="../../assets/nodata.png" >
        <div class="bor" v-for="item in joinOrder">
          <div class="date">{{$t('page.Documentary_date')}} :{{item.date}}  <label class="fr">{{item.multiple}}X</label></div>
          <div class="hua">{{$t('page.Order_revenue')}}：{{item.income}}</div>
          <div class="guo">
            <div class="Tic">{{item.exchange_a}}<label class="price">{{item.price_a}}</label></div>
            <div class="line"></div>
            <div class="Tic">{{item.exchange_b}}<label class="price">{{item.price_b}}</label></div>
          </div>
          <div class="kuai">
            <div class="bok">{{item.gd_amount}}<p>{{$t('page.User_documentary_amount')}} </p></div>
            <div class="bok">
              {{item.customer_income>0 ? '+':''}}
              {{item.customer_income}}USDT<p>{{$t('page.User_documentary_revenue')}}</p></div>
          </div>
        </div>
      </div>


    </div>
    <tabs-footer tab="Automatic"></tabs-footer>

    <exch-end v-if="endShow" @close="endShow=false" ></exch-end>
    <exch-start  v-if="startShow" :oid="order.order_number" @close="startShow=false" ></exch-start>
  </div>
</template>

<script>
import TabsFooter from "@/components/tabs/tabs-footer";
import exchEnd from "@/views/Automatic/components/ExchEnd";
import exchStart from "@/views/Automatic/components/ExchStart";
import {mapState} from "vuex";

export default {
  name: "index",
  components:{TabsFooter,exchEnd,exchStart},
  data(){
    return{
      endShow:false,
      startShow:false,
      oid:'',

      tab_i:1,
      gd_num_left: 0,

      order:{ },


      endOrder:[],
      joinOrder:[],

      downTimer:''

    }
  },
  mounted() {
    this.DwonTime();
    this.gdNum();		//剩余
    this.EndOrder(); //已结束订单
  },
  computed: {
    ...mapState({
      user: state => state.user,
    })
  },
  watch: {
    'user': function(e) {
      console.log(e)
      this.gdNum();		//剩余
      this.EndOrder();  //已结束
    }
  },
  methods:{
    record(){
      this.$router.push({
        name:'gd_order',
        query:{isAuto:1}
      })
    },

    async Ordersev(){ //获取订单

      const { err, res } = await this.$request.get("/chss/trasactionOrder/trade_orders", {
        order_num: 1,
      });
      if (err === null) {
        if(res.order_time > 5){
          this.order = res;
          this.$forceUpdate();
        }else {
          this.Ordersev();
        }
      }

    },
    DwonTime(){ //倒计时
      this.downTimer = setInterval( () =>{
        var order_time =  this.order.order_time - 1
        if(order_time < 0){
          order_time = 0
        }
        this.order.order_time = order_time;
        if(this.order.order_time > 1){
          // this.DwonTime(); //减1秒
        }else {
          this.Ordersev(); // 重新获取订单
        }
      },1000)
    },

    onStart(order_number){
      this.startShow = true;
      console.log(order_number)
    },
    meunTab(e){
      console.log(e)
      this.tab_i = e;
      if(this.tab_i == 2){
        this.JoinOrders()
      }
    },


    async gdNum(){
      if(this.$dapp.getAddress()){
        const { err, res } = await this.$request.get("/chss/trasactionOrder/gd_num_left", {
          address:this.$dapp.getAddress()
        });
        if (err === null) {
          this.gd_num_left = res.gd_num_left
        }
      }
    },
    async EndOrder(){
      if(this.user.address){
        const { err, res } = await this.$request.get("/chss/trasactionOrder/finish_orders", {
          address: this.user.address
        });
        if (err === null) {
          this.endOrder = res
          this.$forceUpdate();
        }
      }

    },
    async JoinOrders(){
      if(this.user.address){
        const { err, res } = await this.$request.get("/chss/userTrasaction/joined_orders", {
          address: this.user.address,
          isAuto:1
        });
        if (err === null) {
          this.joinOrder = res;
          this.$forceUpdate();
        }
      }
    },


  },
  destroyed(){
    console.log("离开")
    clearTimeout(this.downTimer)
  },
}
</script>

<style lang="scss" scoped>
#page{
  position: relative;
  overflow: scroll;
}

.record{text-align: right; text-decoration: underline; color:#6161ff}

.box{padding:0px 30px; box-sizing: border-box;}
.tit{
  color: #FFF; line-height: 80px;
  .t-r{float: right;color: #ce9d11;}
}

.tab{
  display: flex; position: relative; z-index: 1;
  border-bottom: 4px solid #188AFF;
  margin: 0px 30px; padding: 0px;
  margin-bottom: 30px;

  .li{flex: 1; text-align: center; line-height: 80px; color: #fff; }

  .line{
    height:100%;  width: 50%; background:#188AFF;
    position: absolute; z-index: -1;
    bottom: -5px; left: 0%;
    border-top-left-radius: 10px;
    border-top-right-radius:10px;

    transition: all 0.3s;
    -webkit-transition: all 0.3s; /* Safari 和 Chrome */
    -ms-transition: all 0.3s; 	/* IE 9 */
    -moz-transition: all 0.3s; 	/* Firefox */
    -o-transition: all 0.3s;	/* Opera */
  }

  &.tab2{
    .line{left: 50%;}
  }

}

.tab-main{
  height: 800px; overflow-y: scroll; padding: 0px 30px;

  .van-cell{background: none; }
  .van-cell::after{display: none}
}
.bor{
  border: 2px solid #fff; border-radius: 10px;
  padding:20px 30px; box-sizing: border-box;
  margin-top: 10px; margin-bottom: 60px;
  position: relative;color: #eee;
  background: rgba(0 , 0 , 0, 0.3 );

  .hua{color: #ce9d11; margin-top: 10px; font-size: 26px; text-align: center; }
  .type{color: #ce9d11; margin-top: 10px; font-size: 30px; text-align: center;}
  .guo{
    display: flex;
    .Tic{text-align: center;
      .price{display: block;}
    }
    .line{
      flex: 1; margin: 0px 30px; position: relative;
      height: 25px; border-bottom: 2px dashed #409ab8;
      &::before{
        content: "";
        display: block; width: 10px; height: 10px;
        border: 1px solid #409ab8;
        border-bottom-color:transparent;
        border-left-color:transparent;

        transform:rotate(45deg);
        -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
        -ms-transform:rotate(45deg); 	/* IE 9 */
        -moz-transform:rotate(45deg); 	/* Firefox */
        -o-transform:rotate(45deg); 	/* Opera */

        position: absolute; right: 0px; top: 18px;
      }
    }
  }
  .time{
    text-align: center; font-size: 40px;
    margin: 30px; font-weight: 100;
    .text{display: block; line-height: 50px; font-size: 25px; color:#88a6ee}
  }
  .date{
    height: 50px;border-bottom: 2px solid #FFF;
    .fr{float: right;}
  }

  .kuai{
    display: flex; padding-top: 20px;
    .bok{flex: 1; text-align: center;
      font-size: 30px;
      p{display: block; color:#999; font-size: 26px; margin-top: 10px; }
    }
    & .bok:nth-child(2){border-left: 1px solid #FFF;}
  }

  .bottom{
    text-align: center; padding-bottom: 10px;
    .btn{
      display: inline-block;
      color: #333; line-height: 60px;
      width: 200px; text-align: center;
      border-radius: 50px;
      position: absolute;
      bottom: -30px;left: 50%; margin-left: -100px;
    }
    .btn.hui{background: #999; color:#666;}
  }
  .orderBtn{}
}


</style>
